import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../viewmodels/music_player_view_model.dart';
import '../../utils/performance_monitor.dart';

/// 播放/暂停按钮组件
/// 使用 ValueListenableBuilder 监听播放状态，实现细粒度更新
class PlayOrPauseWidget extends StatelessWidget {
  /// 按钮大小
  final double? size;

  /// 图标颜色
  final Color? iconColor;

  /// 背景颜色
  final Color? backgroundColor;

  /// 是否显示背景圆圈
  final bool showBackground;

  const PlayOrPauseWidget({
    Key? key,
    this.size,
    this.iconColor,
    this.backgroundColor,
    this.showBackground = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 跟踪组件重建
    PerformanceMonitor.trackRebuild('PlayOrPauseWidget', context);

    return Consumer<MusicPlayerViewModel>(
      builder: (context, viewModel, child) {
        return ValueListenableBuilder<bool>(
          valueListenable: viewModel.isPlaying,
          builder: (context, isPlaying, child) {
            final iconData = isPlaying ? Icons.pause : Icons.play_arrow;

            if (showBackground) {
              return Container(
                width: size ?? 56,
                height: size ?? 56,
                decoration: BoxDecoration(
                  color: backgroundColor ?? Theme.of(context).primaryColor,
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 8,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: IconButton(
                  icon: Icon(
                    iconData,
                    color: iconColor ?? Colors.white,
                    size: (size ?? 56) * 0.5,
                  ),
                  onPressed: viewModel.togglePlayPause,
                ),
              );
            } else {
              return IconButton(
                icon: Icon(
                  iconData,
                  color: iconColor ?? Theme.of(context).iconTheme.color,
                  size: size ?? 24,
                ),
                onPressed: viewModel.togglePlayPause,
              );
            }
          },
        );
      },
    );
  }
}
